<template>
  <div class="orderDatail">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="el-icon-arrow-left" @click="goBack"></i>
        <span>修改商品</span>
      </div>
      <div>
        <p>
          订单ID:<span>{{ Data.id }}</span>
        </p>
        <el-form
          label-width="80px"
          :model="Data"
        >
          <el-form-item label="订单号">
            <el-input v-model="Data.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="Data.orderTime"></el-input>
          </el-form-item>
          <el-form-item label="送达时间">
            <el-input v-model="Data.deliveryTime"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="Data.phone"></el-input>
          </el-form-item>
          <el-form-item label="收货人">
            <el-input v-model="Data.consignee"></el-input>
          </el-form-item>
          <el-form-item label="送货地址">
            <el-input v-model="Data.deliverAddress"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="Data.remarks"></el-input>
          </el-form-item>
          <el-form-item label="订单金额">
            <el-input v-model="Data.orderAmount"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="Data.orderState">
            <el-option
              label="已受理"
              value="已受理"
            ></el-option>
            <el-option
              label="派送中"
              value="派送中"
            ></el-option>
            <el-option
              label="已完成"
              value="已完成"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editConfirm">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {formatYMDhms} from '@/filters'
import { orderDetail , orderEdit} from "@/api/order";
export default {
  data() {
    return {
      id: "",
      Data: [],
    };
  },
  methods: {
    async getDetail() {
      let res = await orderDetail({ id: this.id });
      console.log(res);
      this.Data = res.data.data;
      this.Data.orderTime=formatYMDhms(res.data.data.orderTime)
      this.Data.deliveryTime=formatYMDhms(res.data.data.deliveryTime)
    },
    goBack() {
      this.$router.push("/order");
    },
    //确认修改
    async editConfirm(){
     let res= await orderEdit(this.Data)
     console.log(res);
     if(res.data.code===0){
        this.$router.push('/order')
     }
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
  },
};
</script>

<style lang="scss" scoped>
.orderDatail {
  padding: 0 20px;
  margin-top: 15px;
  margin-bottom: 20px;
}
span {
  font-weight: bold;
  margin-left: 20px;
}
.el-icon-arrow-left {
  font-weight: bold;
}
.el-button--primary {
  background-color: #d99bac;
  border: 0;
}
</style>